<template>
    <div>
        <van-nav-bar title="首页" />
        <sou></sou>
        <lb></lb>
        <van-grid :column-num="4">
            <van-grid-item v-for="item in catitems" :icon="item.image_src" :text="item.name" />
        </van-grid>

        <div class="aa">
            <div>
                <b>秒杀专场</b>
                <span>{{ 10 }}</span>
                <span>{{ 32 }}</span>
                <span>{{ time }}</span>

            </div>

        </div>
        <div>
            <van-image width="10rem" height="10rem" fit="contain"
                src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
            <van-image width="10rem" height="10rem" fit="contain"
                src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
            <van-image width="10rem" height="10rem" fit="contain"
                src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />

        </div>
          <div>
            <van-image width="10rem" height="10rem" fit="contain"
                src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
            <van-image width="10rem" height="10rem" fit="contain"
                src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
            <van-image width="10rem" height="10rem" fit="contain"
                src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />

        </div>





    </div>
</template>

<script setup>
import sou from '@/components/sou.vue';
import lb from '@/components/lb.vue';
import { ref } from 'vue';
import { catitemsApi } from '@/api/api';
let catitems = ref([])
catitemsApi().then(res => {
    console.log('导航', res)
    catitems.value = res.data.message
})
let time = ref(60)
let timer = setInterval(() => {
    time.value--
    if (time.value == 0) {
        clearInterval(timer)
    }
}, 1000)

</script>

<style lang="scss" scoped>
.aa {
    display: flex;

}

span {
    background: pink;
    margin-left: 10px;
}

.van-image {
    margin-left: 20px;
}
</style>